{% extends 'shop/base.html' %}
{% load staticfiles %}
{% block css %}
<link rel="stylesheet" href="{% static 'engine/css/metisMenu.min.css' %}">
{% endblock css %}

{% block content %}
    <h2>产品管理</h2>
    <div class="panel panel-default">
                <div class="panel-heading ">
                    <a type="button" class="btn btn-raised btn-info" href="{% url 'product_create' %}">添加产品</a>   
                </div>

                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover" id="products_table">
                            <thead>
                                <tr>
                                    <th>产品名称</th>
                                    <th>产品类型</th>
                                    <th>价格</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for product in product_list %}
                                    <tr class="odd gradeX">
                                    <td><a href="{% url 'product_detail' product.id%}">{{ product.name }}</a></td>
                                    <td>{{ product.product_type }}</td>
                                    <td>{{ product.price }}
                                    </td>
                                    <td class="center">
                                        <a id="edit" href="{% url 'product_update' product.id%}">编辑</a>
                                        <a class="delete" href="{% url 'product_delete' product.id%}">删除</a>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

{% endblock content%}

{% block js %}
<script src="{% static 'engine/js/metisMenu.min.js' %}"></script>
<script src="{% static 'engine/js/jquery.dataTables.js' %}"></script>
<script src="{% static 'engine/js/dataTables.bootstrap.js' %}"></script>
<script>
    $(document).ready(function() {
        $('#products_table').dataTable();
        $('.table-responsive').css("overflow-x","hidden");
    });
</script>
{% endblock js %}